//这是webpack的配置文件
const path=require('path')

//导入在内存中生成HTML页面的插件
const htmlwebpackplugin= require('html-webpack-plugin')
//导入.vue文件的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports= {
  mode: 'development',
  plugins: [//webpack插件配置节点
    new htmlwebpackplugin({//创建一个在内存中生成的HTML页面
      template:path.join(__dirname,'./src/index.html'),//来源
      filename:'index.html'//文件名，只有index名称的html才能被webpack打开  
    }),
    //导入vue插件，vue-loader在15之后需要在webpack.config.js中当插件引入
    new VueLoaderPlugin(),
  ],
  module: {//第三方文件loader处理规则
    rules:[//{test：正则匹配，use：[‘接受前面处理的结果，进行最后处理，交给webpack打包处理main.js’，...,'第一处理方式，结果返回给第二处理方式，以此类推']}
      {test:/\.css$/,use:['style-loader','css-loader']},//配置处理css样式文件的处理规则
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理css样式文件的处理规则
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理css样式文件的处理规则  
      {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},//处理图片资源的loader，参数的写法和地址传参一样，所有loader都可以传参，方法一样
      //图片默认都会被转成64位编码格式的编码，是为了节约请求的次数，但是太大的图片被转成64位编码会占用太大的空间，并且易读性很差。
      //这时，可以加limit参数(图片的数据大小)进行限制，小于该值的图片才会被转成64位编码
      //webpack为了避免图片重名，对每张图片都使用了哈希值进行命名（32位）。
      //  如果要想显示原名，就可以加第二个参数name=[name].[ext]表示用原名和原后缀名。
      //  如果页面上有两个图片重名，那么后面的图片会覆盖掉前面的图片，只要文件名相同，就会覆盖，不管从哪里引用的
      //  那么可以在第二个参数上加个8位的hash，这样既有可读性，又可以避免重名覆盖的问题。  
      {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//配置字体处理的loader  
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/ },//配置babel处理高级的js语法
      //注意：exclude:/node_modules/ 排除选项
      //这个选项一定不能少，node_modeules是下载下来的依赖包，如果不排除，babel会把里面的内容全部转换，这样项目就慢到无法运行，最后就done掉。
      //在项目根目录下创建.babelrc配置文件，记住有个‘.’,是json格式的，
      // 必须符合json规范：不能写注释，字符串必须双引号,结束不能有‘，’号。
      //{
      //   "presets":["env","stage-0"],
      //   "plugins":["transform-runtime"]
      // }  
      {test:/\.vue$/,use:'vue-loader'},//配置vue的runtime版本的第三方loader
    ]
  },

}